<template>
    <div class="table-box">
        <ProTable 
        ref="proTable" 
        :columns="columns" 
        :request-api="getAnnouncementManagementList" 
        :init-param="initParam"
        :request-auto="true"
        :data-callback="dataCallback" 
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
        row-key="affId"
        >
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="add">{{$t('systemTool.affiche.add')}}</el-button>
                <el-button type="danger" :icon="Delete" plain @click="del(scope.selectedList)" :disabled="!scope.isSelected">{{$t('systemTool.affiche.delete')}}</el-button>
                <!-- <el-button type="primary" :icon="Search" plain @click="search(scope)">搜索</el-button> -->
            </template>
            <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="edit(scope.row)">{{$t('systemTool.affiche.edit')}}</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteItem(scope.row)">{{$t('systemTool.affiche.delete')}}</el-button>
        </template>
        </ProTable>
        <el-dialog v-model="Visible" :title="titleText" @close="handleClose">
            <el-form>
                <el-form-item :label="$t('systemTool.affiche.title')">
                    <el-input v-model="title" :placeholder="$t('systemTool.affiche.EnterTitle')" />
                </el-form-item>
                <el-form-item :label="$t('systemTool.affiche.department')" v-if="isAdd">
                    <el-select v-model="Department"  placeholder="Select" size="large" style="width: 240px">
                        <el-option v-for="item in DepartmentList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('systemTool.affiche.timeTo')">
                    <el-date-picker v-model="startTime" type="datetime" :placeholder="$t('systemTool.affiche.chooseStartTome')" value-format="YYYY-MM-DD HH:mm:ss"/>
                    &nbsp;{{$t("systemTool.affiche.to")}}&nbsp;
                    <el-date-picker v-model="endTime" type="datetime" :placeholder="$t('systemTool.affiche.chooseEndTime')" value-format="YYYY-MM-DD HH:mm:ss"/>
                </el-form-item>
                <el-form-item :label="$t('systemTool.affiche.content')">
                    <WangEditor v-model:value="Content" height="400px" width="300px" style="min-height: 300px" />
                    <!-- <el-input v-model="Content" placeholder="请输入内容" /> -->
                </el-form-item>
                <el-form-item :label="$t('systemTool.affiche.operation')">
                    <el-button type="primary" :icon="Upload" @click="save">{{$t("systemTool.affiche.save")}}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="AnnouncementManagement">
import { ref, reactive, onMounted, h } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Search, Download, Upload, View, Refresh, InfoFilled } from "@element-plus/icons-vue";
import { getAnnouncementManagementList ,addAnnouncement,editAnnouncement,deleteAnnouncemen} from "@/api/modules/AnnouncementManagement";
import { ElDatePicker ,ElMessage, ElMessageBox, ElNotification} from "element-plus";
import WangEditor from "@/components/WangEditor/index.vue";
import { useUserStore } from "@/stores/modules/user";
import { findStartToOverTimeTechnician } from "@/api/modules";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const userStore = useUserStore();
const Visible = ref(false);
const editVisible = ref(false);
const proTable = ref<ProTableInstance>();
const columns = reactive<ColumnProps<any>[]>([
    { type: "selection" },
    {
        prop: "affId",
        label: t("systemTool.affiche.Id"),
        sortable: true,
    },
    {
        prop: "orgNO",
        label:  t("systemTool.affiche.departmentId"),
        sortable: true

    },
    {
        prop: "orgName",
        label:  t("systemTool.affiche.departmentName"),
        sortable: true

    },
    {
        prop: "affTitle",
        label:  t("systemTool.affiche.title"),
        sortable: true,
        search: {
            el: "input",
            label: t("systemTool.affiche.title"),
            key: "afficheQueryDto.affTitle"
        }
    },
    {
        prop: "affStart",
        label:  t("systemTool.affiche.startTime"),
        sortable: true,
        search: {
            el: "date-picker",
            label:  t("systemTool.affiche.startTime"),
            key: "afficheQueryDto.affStart",
            render: (scope: any) => {
                return h(ElDatePicker, {
                    modelValue: scope.searchParam["afficheQueryDto.affStart"],
                    'onUpdate:modelValue': (val: string) => {
                        scope.searchParam["afficheQueryDto.affStart"] = val;
                    },
                    type: 'datetime',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    placeholder: t('systemTool.affiche.placeholderSign')
                });
            }
        }
    },
    {
        prop: "affEnd",
        label:  t("systemTool.affiche.endTime"),
        sortable: true,
        search: {
            el: "input",
            label: t("systemTool.affiche.endTime"),
            key: "afficheQueryDto.affEnd",
            render: (scope: any) => {
                return h(ElDatePicker, {
                    modelValue: scope.searchParam["afficheQueryDto.affEnd"],
                    'onUpdate:modelValue': (val: string) => {
                        scope.searchParam["afficheQueryDto.affEnd"] = val;
                    },
                    type: 'datetime',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    placeholder: t('systemTool.affiche.placeholderSign')
                });
            }
        }
    },
    {
        prop: "affCreator",
        label:  t("systemTool.affiche.cerator"),
        sortable: true

    },
    {
        prop: "affCreaTime",
        label:  t("systemTool.affiche.createTime"),
        sortable: true

    },
    { prop: "operation", label:  t("systemTool.affiche.operation"), fixed: "right", width: 230 }
]);
const dataCallback = (data: any) => {
    return {
        list: data.data,
        total: data.totalSize,
        pageNum: data.page,
        pageSize: data.rows
    };
};
const initParam = ref("");
const titleText=ref("");
const isAdd = ref(true);
//新增公告
const add=()=>{
    Visible.value=true;
    titleText.value=t("systemTool.affiche.add");
    isAdd.value=true;
}
//编辑
const affId=ref(0);
const edit=(row)=>{
    Visible.value=true;
    titleText.value=t("systemTool.affiche.edit");
    isAdd.value=false;
    affId.value=row.affId;
    title.value=row.affTitle;
    Department.value=row.orgNO;
    startTime.value=row.affStart;
    endTime.value=row.affEnd;
    Content.value=row.affContents;
}
const title=ref("");
const Department = ref("");
const startTime = ref("");
const endTime = ref("");
const Content = ref("");
const DepartmentList=[
    {label:"部门1",value:"1"},
    {label:"部门2",value:"2"},
    {label:"部门3",value:"3"},
    {label:"部门4",value:"4"},
    {label:"部门5",value:"5"},
    {label:"部门6",value:"6"},
]
const save=async()=>{
    if(titleText.value===t("systemTool.affiche.add")){
        const params={
            "afficheDTO.companyNo": 1,
            "afficheDTO.affTitle": title.value,
            orgNameString: Department.value,
            "afficheDTO.affStart": startTime.value,
            "afficheDTO.affEnd": endTime.value,
            "afficheDTO.affContents": Content.value,
            "afficheDTO.affCreator": userStore.userInfo.fullName,
            "afficheDTO.affCreatorId": userStore.userInfo.userId
        }
        const res = await addAnnouncement(params) as any;
        if(res === null){
            console.log(res)
            ElMessage.success(t("systemTool.affiche.addSuccess"));
            Visible.value=false;
            proTable.value?.getTableList();
            titleText.value="";
            title.value="";
            Department.value="";
            startTime.value="";
            endTime.value="";
            Content.value="";
        }
    }else if(titleText.value===t("systemTool.affiche.edit")){
        const editParams={
            "afficheDto.companyNo": 1,
            "afficheDto.affTitle": title.value,
            "afficheDto.affStart": startTime.value,
            "afficheDto.affEnd": endTime.value,
            "afficheDto.affContents": Content.value,
            "afficheDto.affCreator": userStore.userInfo.fullName,
            "afficheDto.affId": affId.value
        }
        const res = (await editAnnouncement(editParams)) as any;
        if(res === null){
            console.log(res)
            ElMessage.success(t("systemTool.affiche.editSuccess"));
            Visible.value=false;
            proTable.value?.getTableList();
            titleText.value="";
            title.value="";
            Department.value="";
            startTime.value="";
            endTime.value="";
            Content.value="";
        }
    }
}
//删除公告
const deleteItem=async(row)=>{
    ElMessageBox.confirm(t("systemTool.affiche.delConfirmOrNot"), t("systemTool.affiche.delConfirm"), {
    confirmButtonText: t("systemTool.affiche.confirm"),
    cancelButtonText: t("systemTool.affiche.cancel"),
    type: "warning",
    center: true
  })
    .then(async () => {
      let params = "ids=" + row.affId;
      try {
        const data = (await deleteAnnouncemen(params)) as any;
        if (data === null) {
          ElMessage.success(t("systemTool.affiche.delSuccess"));
          proTable.value?.clearSelection();
          proTable.value?.getTableList();
        }
      } catch {
        ElMessage.error(t("systemTool.affiche.delError"));
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: t("systemTool.affiche.delCancel")
      });
    })
}
//批量删除
const del = e => {
  ElMessageBox.confirm(t("systemTool.affiche.delConfirmOrNot"), t("systemTool.affiche.delConfirm"), {
    confirmButtonText: t("systemTool.affiche.confirm"),
    cancelButtonText: t("systemTool.affiche.cancel"),
    type: "warning",
    center: true
  })
    .then(async () => {
      let params = "";
      e.forEach(item => {
        params += "ids=" + item.affId + "&";
      });
      console.log(params)
      try {
        const data = (await deleteAnnouncemen(params)) as any;
        if (data === null) {
          ElMessage.success(t("systemTool.affiche.delSuccess"));
          proTable.value?.clearSelection();
          proTable.value?.getTableList();
        }
      } catch {
        ElMessage.error(t("systemTool.affiche.delError"));
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: t("systemTool.affiche.delCancel")
      });
    });
}
const handleClose=()=>{
    titleText.value="";
    title.value="";
    Department.value="";
    startTime.value="";
    endTime.value="";
    Content.value="";
}
</script>
